<template>
    <orh-table class="dutymodule-myschooldutydata" reload @on-reload="reload" pages :pageDate="pageDate" @on-page-change="reload">
        <Table border stripe :data="data" :columns="columns" highlight-row :loading="tableload" slot="table"></Table>

        <orh-sidebar v-model="show" :title="titles" scale slot="others">
            <component :is="content" :condition="condition" :checkid="checkid" @requery="requery"></component>
        </orh-sidebar>
    </orh-table>
</template>
                
<script>
export default {
    name: 'dutymodule-myschooldutydata',
    components: {
        CheckData: resolve => {require(['./CheckData.vue'], resolve);},
        Operation: resolve => {require(['./Operation.vue'], resolve);}
    },
    
    data () {
        return {
            show: false,
            content: null,
            titles: null,
            tableload:false,
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            data: [],
            columns: [
                {
                    title: '值班人',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        let name = params.row.user_info.name.zh
                        return h('div', name)
                    }
                },
                {
                    title: '检查项',
                    minWidth: 250,
                    align: 'center',
                    className: 'checks',
                    render: (h, params) => {
                        let lists = params.row.checks
                        return h('div', lists.map((el, q) => {
                            let state = el.status
                            return h('div', {
                                style: {
                                    height: '40px',
                                    display: 'flex',
                                    borderTop: q === 0 ? '0' : '1px solid #e9eaec'
                                }
                            }, [
                                h('div', {
                                    style: {
                                        flex: 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        borderRight: '1px solid #e9eaec'
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'text',
                                            size: 'small',
                                            disabled: state === 0 ? true : false
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.checkid = el.watchlists_check_id
                                                this.condition = params.row.watchlists_base_data_id
                                                this.titles = `查看 - ${el.name.zh}`
                                                this.show = true
                                                this.content = 'CheckData'
                                            }
                                        }
                                    }, el.name.zh)
                                ]),
                                h('div', {
                                    style: {
                                        color: state === 0 ? '#ff9900' : '#19be6b',
                                        flex: 1,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        maxWidth: '80px'
                                    }
                                }, state === 0 ? '未检查' : '已检查')
                            ])
                        }))
                    }
                },
                {
                    title: '值班时间',
                    width: 150,
                    align: 'center',
                    key: 'created_at'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        let state = params.row.checks.find(el => el.status === 1)
                        let dates = JSON.parse(params.row.created_at.slice(0,10).split("-").join(""))
                        let days = new Date ()
                        let aa = JSON.parse((days.toLocaleDateString ()).split("/").join(""))
                        let status = false
                        if (dates < aa) {
                            status = true
                        }
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'success',
                                    size: 'small',
                                    disabled: state ? false : true
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.chaeckData(params.row.watchlists_base_data_id)
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                directives: [
                                    {
                                        name: 'button',
                                        value: 'edit',
                                    }
                                ],
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    disabled: status
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.UpdateData(params.row.watchlists_base_data_id)
                                    }
                                }
                            }, '检查')
                        ]);
                    }
                }
            ],

            url: 'api/watchlists/v1/securitydata/myWatchlistsData',

            condition: false,

            checkid: null,
        }
    },

    methods: {
        
        /************************************************************
         * 
         * 当添加或修改数据成功后重新请求数据
         * @param   {state}           添加修改成功后返回状态
         * 
         ************************************************************/
        requery (state) {
            if(state == true){
                this.show = false
                this.reload (this.pageDate.current_page)
            }
        },
        
        /************************************************************
         * 
         * 查看数据
         * @param   {index}           要修改的数据id
         * 
         ************************************************************/
        chaeckData (index) {
            this.checkid = false
            this.condition = index
            this.titles = '查看'
            this.show = true
            this.content = 'CheckData'
        },
        
        /************************************************************
         * 
         * 修改数据
         * @param   {index}           要修改的数据id
         * 
         ************************************************************/
        UpdateData (index) {
            this.condition = index
            this.titles = '修改'
            this.show = true
            this.content = 'Operation'
        },
        
        /************************************************************
         * 
         * 手动刷新
         * 
         ************************************************************/
        reload (index) {
            this.data = []
            this.tableload = true
            this.queryData (index ? index : 1)
        },
        
        /************************************************************
         * 
         * 查询数据
         * 
         ************************************************************/
        queryData (index) {
            this.tableload = true;
            let params = {
                page: index
            }
            this.$http.get(this.url, { params }).then(val=>{
                this.pageDate.per_page = val.pages.per_page
                this.pageDate.total = val.pages.total
                this.pageDate.current_page = val.pages.current_page
                this.data = val.data
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        }
    },
    created () {
        this.reload ()
    },
}
</script>

<style lang="less">
.dutymodule-myschooldutydata {
    .ivu-table td.checks {
        .ivu-table-cell {
            padding: 0;
        }
    }
}
</style>

